<template>
  <div class="container">
    <div class="head">
      <el-menu
        :default-active="type"
        mode="horizontal"
        @select="handleSelect"
        active-text-color="#FF5757"
      >
        <el-menu-item
          index="0"
          style="font-weight: 400; font-size: 16px; color: #333333"
          >{{ t("全部订单") }}</el-menu-item
        >
        <el-menu-item
          index="1"
          style="font-weight: 400; font-size: 16px; color: #333333"
          >{{ t("待付款") }}</el-menu-item
        >
        <el-menu-item
          index="2"
          style="font-weight: 400; font-size: 16px; color: #333333"
          >{{ t("待发货") }}</el-menu-item
        >
        <el-menu-item
          index="3"
          style="font-weight: 400; font-size: 16px; color: #333333"
          >{{ t("待收货") }}</el-menu-item
        >
        <el-menu-item
          index="6"
          style="font-weight: 400; font-size: 16px; color: #333333"
          >{{ t("已完成") }}</el-menu-item
        >
        <el-menu-item
          index="5"
          style="font-weight: 400; font-size: 16px; color: #333333"
          >{{ t("退款/售后") }}</el-menu-item
        >
      </el-menu>
    </div>
    <div class="table">
      <el-table
        class="form"
        ref="multipleTable"
        :data="tableData.data"
        tooltip-effect="dark"
        style="width: 100%"
        :header-cell-style="{
          background: '#F1F1F1',
          color: '#000000',
          fontSize: '16px',
        }"
        @selection-change="handleSelectionChange"
        :key="type"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column :label="t('商品')" width="300">
          <template slot-scope="scope">
            <div
              class="goods"
              v-for="(item, index) in scope.row.goods"
              :key="index"
            >
              <img class="cover" :src="item.image | imgSrc" />
              <span class="info">
                <span class="name">{{ item.title }}</span>
                <span class="desc" v-if="item.is_works != 1">{{
                  $t("购物车.颜色") + ":" + item.difference
                }}</span>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="type == 5"
          prop="refund_res.price"
          :label="t('退款金额')"
          width="200"
        >
        </el-table-column>
        <el-table-column
          v-if="
            type == 0 ||
            type == 1 ||
            type == 2 ||
            type == 3 ||
            type == 4 ||
            type == 6
          "
          :label="t('单价')"
          width="200"
          :align="'center'"
        >
          <template slot-scope="scope">
            <div class="tow-column-list">
              <p v-for="(item, index) in scope.row.goods" :key="index">
                {{ "￥" + item.price }}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="t('数量')" width="200" :align="'center'">
          <template slot-scope="scope">
            <div class="tow-column-list">
              <p v-for="(item, index) in scope.row.goods" :key="index">
                {{ item.number }}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="type == 5"
          prop="refund_res.agreetime_text"
          :label="t('退款时间')"
          width="200"
          header-align="center"
          :align="'center'"
        >
        </el-table-column>
        <el-table-column
          v-if="type == 5"
          prop="refund_res.state_text"
          :label="t('退款状态')"
          width="200"
          header-align="center"
          :align="'center'"
        >
        </el-table-column>
        <el-table-column
          v-if="type == 0 || type == 2 || type == 3 || type == 4 || type == 6"
          :label="t('商品操作')"
          width="200"
          :align="'center'"
        >
          <template slot-scope="scope">
            <el-button
              class="btn-goods-action"
              type="text"
              v-if="scope.row.state == 2"
              @click="action_click('goods_refund', scope.row)"
            >
              {{ t("退款/退换货") }}
            </el-button>
            <el-button
              class="btn-goods-action"
              type="text"
              v-if="scope.row.state == 3 || scope.row.state == 4"
              @click="action_click('goods_return', scope.row)"
            >
              {{ t("退款/退换货") }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          v-if="type == 0 || type == 2 || type == 3 || type == 4 || type == 6"
          prop="pay_price"
          :label="t('实付款')"
          width="200"
          :align="'center'"
        >
        </el-table-column>
        <el-table-column
          v-if="type != 5"
          prop="order_status"
          :label="t('交易状态')"
          width="200"
          header-align="center"
        >
          <template slot-scope="scope" v-if="scope.row.state != 5">
            <div class="status">
              <span>{{ getStatusText(scope.row.state) }}</span>
              <div class="order_deatil">
                <el-button
                  class="order-btn"
                  type="text"
                  size="small"
                  @click="action_click('order_detail', { id: scope.row.id })"
                  >{{ t("查看详情") }}</el-button
                >
                <el-divider direction="vertical"></el-divider>
                <el-button
                  class="order-btn"
                  type="text"
                  size="small"
                  @click="action_click('order_logistics', scope.row)"
                  >{{ t("查看物流") }}</el-button
                >
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" :label="t('操作')" :align="'center'">
          <template slot-scope="scope">
            <div class="actions">
              <el-button
                class="bg-red"
                v-if="scope.row.state == 0 || scope.row.state == 4"
                type="text"
                size="small"
                style="height: 40px"
                @click="action_click('purchase_again')"
              >
                {{ t("再次购买") }}
              </el-button>
              <el-button
                class="bg-red"
                v-if="scope.row.state == 0 || scope.row.state == 2"
                type="text"
                size="small"
                style="height: 40px"
                @click="action_click('order_edit', scope.row)"
              >
                {{ t("修改订单") }}
              </el-button>
              <el-button
                class="bg-red"
                v-if="scope.row.state == 0 || scope.row.state == 3"
                type="text"
                size="small"
                style="height: 40px"
                @click="action_click('order_confirm', scope.row)"
              >
                {{ t("确认收货") }}
              </el-button>
              <el-button
                class="bg-gray"
                v-if="scope.row.state == 1"
                type="text"
                size="small"
                style="height: 40px"
                @click="action_click('cancel_order', scope.row)"
              >
                {{ t("取消订单") }}
              </el-button>
              <el-button
                class="bg-red"
                v-if="scope.row.state == 1"
                type="text"
                size="small"
                style="height: 40px"
                @click="action_click('order_pay', scope.row)"
              >
                {{ t("去付款") }}
              </el-button>
              <template v-if="scope.row.state == 5 && scope.row.refund_res">
                <el-button
                  class="bg-000"
                  v-if="scope.row.refund_res.state == 0"
                  type="text"
                  size="small"
                  style="height: 40px"
                  @click="action_click('cancel_refund', scope.row)"
                >
                  {{ t("撤销申请") }}
                </el-button>
                <template v-if="scope.row.refund_res.type == 0">
                  <el-button
                    class="bg-red"
                    v-if="scope.row.refund_res.state != 5"
                    type="text"
                    size="small"
                    style="height: 40px"
                    @click="action_click('goods_refund', scope.row)"
                  >
                    {{ t("修改申请") }}
                  </el-button>
                </template>
                <template v-if="scope.row.refund_res.type == 1">
                  <el-button
                    class="bg-red"
                    v-if="scope.row.refund_res.state != 5"
                    type="text"
                    size="small"
                    style="height: 40px"
                    @click="action_click('goods_return', scope.row)"
                  >
                    {{ t("修改申请") }}
                  </el-button>
                </template>
              </template>
              <el-button
                class="bg-999"
                v-if="scope.row.state == 5 && scope.row.refund_res"
                type="text"
                size="small"
                style="height: 40px"
                @click="action_click('goods_delete', scope.row)"
              >
                {{ t("删除记录") }}
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="page"
        background
        layout="prev, pager, next"
        :total="tableData.total"
        hide-on-single-page
      >
      </el-pagination>
    </div>
    <div class="foot-p"></div>
    <div class="foot">
      <span class="foot-action">{{ t("批量确认收货") }}</span>
    </div>
    <el-dialog
      class="dialog"
      :visible.sync="dialogVisible.show"
      :before-close="handleClose"
      :width="`${dialogVisible.width}px`"
      top="10vh"
    >
      <span slot="title" class="dialog-title">{{ dialogVisible.title }}</span>
      <template v-if="dialogVisible.action == 'cancel_order'">
        <orderCancel
          :order="dialogVisible.item"
          @cancelReason="dialogHandle($event, 'cancel')"
        ></orderCancel>
      </template>
      <template v-if="dialogVisible.action == 'order_logistics'">
        <orderLogistics :goods="dialogVisible.item"></orderLogistics>
      </template>
      <template v-if="dialogVisible.action == 'goods_refund'">
        <orderRefund :goods="dialogVisible.item"></orderRefund>
      </template>
      <template v-if="dialogVisible.action == 'goods_return'">
        <orderReturn :goods="dialogVisible.item"></orderReturn>
      </template>
      <template v-if="dialogVisible.action == 'order_edit'">
        <orderEdit
          :address="dialogVisible.item"
          @editOrder="dialogHandle($event, 'order_edit')"
        ></orderEdit>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import orderCancel from "@/components/orderDialog/orderCancel.vue";
import orderLogistics from "@/components/orderDialog/orderLogistics.vue";
import orderRefund from "@/components/orderDialog/orderRefund.vue";
import orderReturn from "@/components/orderDialog/orderReturn.vue";
import orderEdit from "@/components/orderDialog/orderEdit.vue";
import {
  orderList,
  cancelOrder,
  orderPayment,
  updateOrderAddress,
  orderCancelRefund,
  orderConfirmTake,
  orderDelteRefundLog,
} from "@/utils/api.js";
import { getOrderStatus } from "@/utils/util.js";
export default {
  components: {
    orderCancel,
    orderLogistics,
    orderRefund,
    orderReturn,
    orderEdit,
  },
  data() {
    return {
      /**
       * //0 是全部订单 1是待付款 2是待发货 3是待收货 4是已完成 5是退款/售后
       * 1=待支付,2=待发货,3=待收货,4=待评论,5=售后订单,6=已完成,7=已取消
       */
      type: "0",
      tableData: {},
      dialogVisible: {
        show: false,
        action: "",
        title: "",
        item: null,
        width: 40,
      },
    };
  },
  mounted() {
    this.type = this.$route.query.type;
    this.getDataList();
    // for (let index = 0; index < 10; index++) {
    //     this.tableData.push({
    //         cover: "",
    //         goods_name: "iPhone 15 Pro Max 手机壳",
    //         desc: "颜色：黑色",
    //         date: '2016-05-03',
    //         price: '99.99',
    //         address: '上海市普陀区金沙江路 1518 弄',
    //         nums: 3,
    //         refund_time: "2016-05-03",
    //         pay_price: 33,
    //         order_status: 1,
    //         method: "退款/退换货"
    //     })
    // }
    this.$EventBus.$on("orderDialogHandle", (e) => {
      this.handleClose();
      this.getDataList();
    });
  },
  unmounted() {
    console.log("order unmounted eventbus");
    this.$EventBus.off();
  },
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`我的订单.${v}`);
    },
    handleSelect(e) {
      // this.$route.query.type = e;
      this.type = e;
      this.getDataList();
    },
    handleSelectionChange(e) {},
    /**
     * 点击事件
     * @param {Stirng} action 操作
     * @param {Object} para 传参
     */
    action_click(action, para) {
      console.log("订单的信息-----", action, para);
      if (action == "cancel_order") {
        //取消订单
        this.dialogVisible = {
          show: true,
          action: action,
          title: this.t("选择取消原因"),
          item: para,
          width: 500,
        };
      } else if (action == "order_detail") {
        this.$router.push({
          name: "orderDetail",
          query: {
            id: para.id,
          },
        });
      } else if (action == "order_logistics") {
        //物流信息
        this.dialogVisible = {
          show: true,
          action: action,
          title: this.t("物流信息"),
          item: para,
          width: 700,
        };
      } else if (action == "goods_refund") {
        //退款
        this.dialogVisible = {
          show: true,
          action: action,
          title: this.t("退款申请"),
          item: para,
          width: 1000,
        };
      } else if (action == "goods_return") {
        //退换货
        this.dialogVisible = {
          show: true,
          action: action,
          title: this.t("退货退款申请"),
          item: para,
          width: 1000,
        };
      } else if (action == "order_pay") {
        //订单支付
        orderPayment({
          order_id: para.id,
          pay_type: 0,
        }).then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.getDataList();
          }
        });
      } else if (action == "order_edit") {
        //订单编辑
        this.dialogVisible = {
          title: this.t("订单修改"),
          action: action,
          show: true,
          item: para.address,
          width: 666,
        };
      } else if (action == "cancel_refund") {
        //取消订单
        orderCancelRefund({
          refund_id: para.refund_res.id,
        }).then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.getDataList();
          }
        });
      } else if (action == "order_confirm") {
        //确认收货
        orderConfirmTake({ order_id: para.id }).then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.getDataList();
          }
        });
      } else if (action == "goods_delete") {
        // 订单记录删除
        orderDelteRefundLog({ refund_id: para.refund_res.id }).then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.getDataList();
          }
        });
      } else if (action == "purchase_again") {
        this.$router.push("/");
      }
    },
    handleClose() {
      this.dialogVisible = { show: false };
    },
    /**
     * 弹窗回调
     * @param {Object} e 弹窗回调信息
     * @param {String} type 取消订单:cancel 订单编辑:order_edit
     */
    dialogHandle(e, type) {
      this.dialogVisible = { show: false };
      console.log(e);
      if (type == "cancel") {
        cancelOrder({
          order_id: e.order.id,
          cancel_cause: e.reason.cancel_cause,
        }).then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.getDataList();
          }
        });
      } else if (type == "order_edit") {
        if (e.cancel) return;
        updateOrderAddress({
          id: e.id,
          name: e.name,
          mobile: e.mobile,
          address: e.address,
          country: e.country,
          province: e.province,
          city: e.city,
          district: e.district,
        }).then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.getDataList();
          }
        });
      }
    },
    getDataList() {
      orderList({ status: this.type }).then((res) => {
        if (res.code == 1) {
          console.log("表格的数据------", res.data);
          this.tableData = res.data;
        }
      });
    },
    /**
     * 返回交易状态文字
     * @param {String|Number} state 订单状态:1=待支付,2=待发货,3=待收货,4=待评论,5=售后订单,6=已完成,7=已取消
     */
    getStatusText(state) {
      return this.t(getOrderStatus(state));
    },
    /**
     * 操作点击事件
     * @param {Object} item 选中的对象
     * @param {String} state order_pay:支付 order_edit:订单修改
     */
    actions_click(item, state) {},
  },
};
</script>
<style lang="less" scoped>
@import "../../styles/var.less";

::v-deep .el-dialog__headerbtn i {
  font-size: 30px !important;
  color: #000;
}

.container {
  box-sizing: border-box;
  background: #f9f9f9;
  width: 1700px;
  margin: 0 110px;
  // height: calc(100vh - @navHeight);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;

  .head {
    margin-top: 30px;
    width: 100%;
  }

  .table {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;

    .form {
      // height: auto;
      // flex: 1;

      .goods {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;

        .cover {
          width: 60px;
          height: 60px;
          object-fit: contain;
        }

        .info {
          margin-left: 12px;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          flex-direction: column;

          .name {
            color: #000;
            font-size: 16px;
            font-weight: 400;
          }

          .desc {
            margin-top: 16px;
            color: #999;
            font-size: 14px;
            font-weight: 400px;
          }
        }
      }

      .tow-column-list {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 40px;
        font-weight: 400;
        font-size: 16px;
        color: #000000;
      }

      .btn-goods-action {
        font-weight: 400;
        font-size: 16px;
        color: #010101;
      }

      .status {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-weight: 400;
        font-size: 16px;
        color: #000000;
        .order_deatil {
          color: #ff5757;

          .order-btn {
            color: inherit;
          }
        }
      }

      .actions {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 5px;

        .bg-red {
          background: #ff5757;
          color: #ffffff;
        }

        .bg-000 {
          background: #000000;
          color: #ffffff;
        }

        .bg-gray {
          background: #e3e3e3;
          color: #333;
        }

        .bg-999 {
          background: #999;
          color: #fff;
        }

        :nth-child(n) {
          width: 100px;
          margin-left: 0px;
          border-radius: 10px;
        }
      }
    }

    .page {
      margin-top: 50px;
      // flex: 1;
    }
  }

  .foot-p {
    height: 70px;
  }

  .foot {
    position: fixed;
    bottom: @bottomNavHeight;
    left: 0;
    background: #fff;
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    width: 100%;
    z-index: 99;

    .foot-action {
      margin-left: 120px;
      color: #ff5757;
      font-size: 14px;
    }
  }

  .dialog {
    .dialog-title {
      font-weight: bold;
      font-size: 20px;
      color: #000;
    }
  }
}
</style>
<style>
body {
  background-color: #f9f9f9 !important;
}
</style>
